<template xmlns="http://www.w3.org/1999/html">
  <div style="margin-left:0px;border: 0 solid red;">

    <div class="center-middle" style="color: #303133;text-align: center;"><h2>⚡💧欢迎使用 水电费管理系统💧⚡</h2></div>
    <!-- 显示公寓水电用量记录和总剩余量的表格 -->
    <el-table :data="tableData" border stripe>
      <el-table-column
          fixed
          align="center"
          sortable
          prop="id"
          label="ID"
      >
      </el-table-column>
      <el-table-column align="center" label="公寓楼" prop="buildingName" sortable></el-table-column>
      <el-table-column align="center" label="公寓号" prop="dormitoryName" sortable></el-table-column>
      <el-table-column
          align="center"
          prop="status"
          label="状态">
        <template slot-scope="scope">
          <el-tag :type="getStatusTagType(scope.row)">
            {{ getStatusLabel(scope.row) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="更新日期" prop="updateDate" width="110" sortable></el-table-column>
      <el-table-column align="center" label="实际水量使用" prop="actualWaterUsage"></el-table-column>
      <el-table-column align="center" label="实际电量使用" prop="actualElectricityUsage"></el-table-column>
      <el-table-column align="center" label="预付水量" prop="prepaidWaterAmount"></el-table-column>
      <el-table-column align="center" label="预付电量" prop="prepaidElectricityAmount"></el-table-column>
      <el-table-column align="center" label="剩余水量" prop="remainingWaterAmount"></el-table-column>
      <el-table-column align="center" label="剩余电量" prop="remainingElectricityAmount"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="margin-top: 20px;float: right"
                   background
                   layout="prev, pager, next"
                   :page-size="pageSize"
                   :total="total"
                   :current-page.sync="currentPage"
                   @current-change="page">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: null,
      currentPage: 1,
      pageSize: 5,
      total: null,
      key: '',
      value: '',
      ruleForm: {
        key: '',
        value: '',
        page: '',
        size: 3
      },
      rules: {
        key: [
          {required: true, message: '请选择字段', trigger: 'change'}
        ]
      }
    }

  },
  methods: {
    submitForm(formName) {
      const _this = this
      //让翻页复原
      _this.currentPage = 1
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this
          _this.ruleForm.page = _this.currentPage
          axios.get('http://localhost:9090/utilities/search', {params: _this.ruleForm}).then(function (resp) {
            _this.tableData = resp.data.data.data
            _this.total = resp.data.data.total
          })
        }
      });
    },
    page(currentPage) {
      const _this = this
      if (_this.ruleForm.value === '') {
        axios.get('http://localhost:9090/utilities/list/' + currentPage + '/' + _this.pageSize).then(function (resp) {
          _this.tableData = resp.data.data.data
          _this.total = resp.data.data.total
        })
      } else {
        _this.ruleForm.page = _this.currentPage
        axios.get('http://localhost:9090/utilities/search', {params: _this.ruleForm}).then(function (resp) {
          _this.tableData = resp.data.data.data
          _this.total = resp.data.data.total
        })
      }
    },
    edit(row) {
      console.log('Row object:', row.id);
      this.$router.push('/utilitiesUpdate?id=' + row.id)
    },
    calculateRemaining(row) {
      row.remainingWaterAmount = row.prepaidWaterAmount - row.actualWaterUsage;
      row.remainingElectricityAmount = row.prepaidElectricityAmount - row.actualElectricityUsage;
    },
    getStatusTagType(row) {
      // 根据剩余水电费是否为负数返回不同的 el-tag 类型
      return this.isNegative(row.remainingWaterAmount) || this.isNegative(row.remainingElectricityAmount) ? 'danger' : 'success';
    },
    getStatusLabel(row) {
      // 根据剩余水电费是否为负数返回不同的标签文本
      return this.isNegative(row.remainingWaterAmount) || this.isNegative(row.remainingElectricityAmount) ? '欠费' : '正常';
    },
    isNegative(value) {
      return value < 0;
    },
  },
  computed: {
    currentUserId() {
      // 假设在 Vuex 中有一个名为 currentUser 的模块，包含用户信息
      return this.$store.state.student.id;
    }
  },
  created() {
    const _this = this
    axios.get('http://localhost:9090/utilities/list/1/' + _this.pageSize).then(function (resp) {
      _this.tableData = resp.data.data.data
      _this.total = resp.data.data.total
    })
  }
}
</script>

<style scoped>
</style>
